<template>
  <div :id="id" class="box"></div>
</template>
<script>
export default {
  name: "myChart",
  props: ["data", "id"],
  data() {
    return {
      myChart: "",
    };
  },
  methods: {
    init() {
      this.myChart = this.$echarts.init(document.getElementById(this.id));
      this.myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: this.proportionName,
        },
        color: ["#75B6E4", "#90EC7D", "#46454A"],
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: "70%",
            label: {
              normal: {
                position: "inner",
                show: false,
              },
            },
            center: ["45%", "45%"],
            data: this.data ? this.data : [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
  mounted() {
    this.init();
  },
  //销毁组件
  destroyed() {
    this.myChart = "";
  },
};
</script>
<style>
.box {
  height: 100%;
  width: 100%;
}
</style>
